<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>Insert title here</title>
<!-- 引入bootstrap的css -->
<link type="text/css" rel="stylesheet" href="../boo/css/bootstrap.css">

<!-- 引入本页面的css -->
<link type="text/css" rel="stylesheet" href="booday01.css">
</head>
<body>

	<!-- 布局容器 -->
<div class="container">
	<div class="row">
		<div class="col-md-1 pink">.col-md-1</div>
		<div class="col-md-1 blue">.col-md-1</div>
		<div class="col-md-1 pink">.col-md-1</div>
		<div class="col-md-1 blue">.col-md-1</div>
		<div class="col-md-1 pink">.col-md-1</div>
		<div class="col-md-1 blue">.col-md-1</div>
		<div class="col-md-1 pink">.col-md-1</div>
		<div class="col-md-1 blue">.col-md-1</div>
		<div class="col-md-1 pink">.col-md-1</div>
		<div class="col-md-1 blue">.col-md-1</div>
		<div class="col-md-1 pink">.col-md-1</div>
		<div class="col-md-1 blue">.col-md-1</div>
	</div>
	<h2>移动设备和桌面屏幕</h2>
	<div class="row">
		<div class="col-md-8 blue">.col-md-8</div>
		<div class="col-md-4 pink">.col-md-4</div>		
	</div>
	<h2>多余的列（column）将另起一行排列</h2>
	<div class="row">
		<div class="col-md-9 blue">.col-md-9</div>
		<div class="col-md-4 pink">.col-md-4</div>
	</div>
	<h2>偏移列</h2>
	<div class="row">
		<div class="col-md-3 blue">.col-md-3</div>
		<div class="col-md-4 col-md-offset-5 pink">.col-md-4</div>
	</div>
	<h2>嵌套列</h2>
	<div class="row">
  		<div class="col-sm-9 blue">Level 1
    <div class="row">
    	<div class="col-md-6 pink">Level 2:col-sm-6
    </div>
    	<div class="col-md-6 yellow">Level 2:col-sm-6
    		</div>
    	</div>
	</div>
</div>
	<table class="table table-bordered">
		<caption>学生一览表</caption>   
		<tr>
		<!-- th会有加粗，居中的效果 -->
		<th class="info">学号</th>
		<th class="warning">名字</th>
		<th class="success">性别</th>
		<th class="active">专业</th>
		</tr>
		<tr>
		<td>1001</td>
		    <td>张1</td>
		    <td>男</td>
		    <td>计算机</td>
		</tr>
		<tr>
		    <td>1002</td>
		    <td>王五</td>
		    <td>女</td>
		    <td>日语</td>
		</tr>
	</table>

	
	
	
	
	
</div>	
<!-- 引入jquery的js -->
<script type="text/javascript" src="../boo/js/jquery1.12.4.min.js"></script>
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="../boo/js/bootstrap.js"></script>
</body>
</html>